<template>
  <div class="index">
    <!-- 频道列表 -->
    <!--
      curIndex
      用下标表示
     -->
    <van-tabs v-model="curIndex">
      <van-tab
        v-for="channel in channels"
        :title="channel.name"
        :key="channel.id"
       >
        <!-- 频道与文章列表是一一对应的。每个频道都需要有一个文章列表组件。
        article-list写在了v-for中，则每次循环都会生成一个文章列表组件。
        van-tab具有类似于 懒加载的效果： 只有激活了当前的tab，才会去创建文章列表组件 -->
        <!-- 文章列表 -->
        <!-- 把当前的频道信息传给子组件 -->
        <!--
            从(articeList.vue子组件)中传给了父组件
            props: ['channel'],
         -->
        <article-list :channel="channel"
        @showMoreAction = "hShowMoreAction"></article-list>
      </van-tab>
</van-tabs>

    <!--
      频道列表 开关 通过定位
      这个时调用 articleList 组件  -->
    <div v-if="$store.getters.isLogin"
    class="bar-btn" @click="showChannelEdit=true">
        <van-icon name="wap-nav"/>
    </div>

    <!-- 文章----更多操作 -->
    <van-popup v-model="showMoreAction"
     :style="{ width: '80%' }" >
      <!--
        van-popup 在它没有弹出之前，moreAction组件不会创建
        @dislike="hDislike" : 处理不感兴趣
        @report ="hReport" :处理举报
        -->
      <more-action
       @report = "hReport"
       @dislike="hDislike"
       ref="refMoreAction"></more-action>
    </van-popup>
    <!-- 频道管理  这个时调用 articleList 组件 -->
    <van-action-sheet v-model="showChannelEdit" title="频道管理">
      <!-- 父传子  把当前订阅的频道传给频道编辑组件
        2. 监听子组件回传的事件
        3. ：curIndex = "curIndex" 把当前频道的下标传入
       -->
      <channel-edit
      :channels="channels"
      :curIndex = "curIndex"
       @fixedIndex="hFixedIndex"
       @updateCurChannel="updateCurChannel"></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { getChannels } from '@/api/channel.js'
// import { dislikeArticle, reportArticle } from '@/api/article.js'
import * as obj from '@/api/article.js'
import ArticleList from './articleList.vue'
import MoreAction from './moreAction.vue'
import ChannelEdit from './channelEdit.vue'
const { dislikeArticle, reportArticle } = obj
export default {
  name: 'Home',
  data () {
    return {
      curIndex: 0, // 表示当前选中评到的索引值
      showMoreAction: false, // 是否显示更多操作的弹层
      channels: [], // 当前订阅的频道
      articleId: null, // 当前要执行更多操作的 文章编号
      showChannelEdit: false
    }
  },
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  created () {
    this.loadChannels()
  },
  methods: {
    hFixedIndex (idx) {
      this.curIndex = idx
    },
    // 处理子组件channelEdit中用户在我的频道上点击的动作
    // 1 . 关闭 我的频道 弹层
    // 2 . 切换频道列表到 当前频道上去
    updateCurChannel (idx) {
      // console.log('处理子组件channelEdit中用户在我的频道上点击的动作', channel)
      // 1 . 关闭 我的频道 弹层
      this.showChannelEdit = false
      // 2 . 切换频道列表到 当前频道上去
      this.curIndex = idx
    },
    delArticle () {
      const obj = {
        articleId: this.articleId, // 当前的文章编号
        channelId: this.channels[this.curIndex].id// 当前频道id
      }
      this.$eventBus.$emit('delArticle', obj)
    },
    async hReport (reportTypeId) {
      // console.log('父组件收到举报的类型时', reportTypeId)
      try {
        // 1. 调用接口
        // const result = await reportArticle(this.articleId, reportTypeId)
        // console.log(result)
        await reportArticle(this.articleId, reportTypeId)
        // 2. 退出弹层
        this.showMoreAction = false
        // 3. 通知文章列表去删除被点击的文章
        this.delArticle()
        this.$toast.success('操作成功')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    },
    async hDislike () {
      // console.log('用户点击了， 不感兴趣,当前要操作的文章编号是：', this.articleId)
      try {
        // 1. 调用接口
        await dislikeArticle(this.articleId)
        // 2. 退出弹层
        this.showMoreAction = false
        // 3. 通知文章列表去删除被点击的文章
        this.delArticle()
        this.$toast.success('操作成功')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    },
    // 处理子组件中抛出的：显示更多操作 的弹层
    // 1. 显示弹层：更多操作
    // 2. 保存后续要操作的文章编号
    hShowMoreAction (articleId) {
      // 显示弹层
      this.showMoreAction = true
      // 保存文章编号
      this.articleId = articleId
      // 1.确保moreAction组件中的isReport为false
      //  本质上就是： 在父组件中去修改子组件中的数据项
      // 思路： 在父组件中获取子组件的引用，并直接使用子组件的数据
      // $refs   ☞  获取当前的引用
      // console.log(this.$refs.refMoreAction)
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = true
        this.$refs.refMoreAction.abc()
      }
    },
    async loadChannels () {
      const result = await getChannels()
      // console.log(result)
      this.channels = result.data.data.channels
    }
  }
}
</script>
